<!--提醒消息抽屉-->
<script setup>
import {setupMapActions, setupMapMutations, setupMapState} from "@/assets/js/vuexUtils";
import Timestamp from "@/components/common/Timestamp.vue";
import {MessageNoticeType} from "@ginstone/nga-api/dist/src/enums/MessageNoticeType";
import {ReplyNoticeType} from "@ginstone/nga-api/dist/src/enums/ReplyNoticeType";
import {ref, toRefs, watch} from "vue";
import ReadLink from "@/components/common/link/ReadLink.vue";
import {useStore} from "vuex";
import UserLink from "@/components/common/link/UserLink.vue";
import MessageLink from "@/components/common/link/MessageLink.vue";


const {
  unreadCount,
  totalCount,
  replyNotices,
  recommendNotices,
  msgNotices
} = setupMapState("Notice", ["unreadCount", "totalCount", "replyNotices", "recommendNotices", "msgNotices"])

const {noticeEnable, noticeClear} = setupMapActions("Notice", ['noticeEnable', 'noticeClear'])

const {read, readAll} = setupMapMutations("Notice", ["read", "readAll"])

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const store = useStore();


const modelValue = toRefs(props).modelValue
// 标题长度限制
const titleLimit = 15;
// 激活的标签
const activeTab = ref();

const show = ref(modelValue.value)
// tab标签的label
const label = (prefix, arr) => {
  // 未读数量
  const unread = arr.filter(i => !i.hasOwnProperty("read")).length
  // 总数量
  return `${prefix}(${unread}/${(arr.length)})`
}
// 关闭提醒
const noHint = (tid, pid) => {
  noticeEnable({tid, pid, no_hint: 1,})
}
// 打开时操作
const onOpen = () => {
  // 选中第一个有数据的标签
  if (replyNotices.value && replyNotices.value.length > 0) {
    activeTab.value = "replyNotices"
  } else if (msgNotices.value && msgNotices.value.length > 0) {
    activeTab.value = "msgNotices"
  } else if (recommendNotices.value && recommendNotices.value.length > 0) {
    activeTab.value = "recommendNotices"
  }
}

// 关闭抽屉
const closeDrawer = () => {
  emit('update:modelValue', false)
}

const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})

watch(modelValue, (nv) => {
  show.value = nv
})

</script>

<template>
  <el-drawer v-model="show" :show-close="false" :with-header="false" size="70%" @close="closeDrawer" @open="onOpen">
    <el-tabs v-model="activeTab">
      <!--回复提示-->
      <el-tab-pane :disabled="replyNotices.length===0" :label="label('回复',replyNotices)" lazy name="replyNotices">
        <ol>
          <li v-for="item in replyNotices" :class="'notice-item'+(item.read?'':' unread-notice')" @click="read(item)">
            <timestamp :date="item.timestamp"/>
            <span class="notice-span">
              <user-link :user-id="item.authorId" :username="item.authorName">{{ item.authorName }}</user-link>
            </span>
            <span class="notice-span">于</span>
            <!--主题链接-->
            <read-link :page="item.page" :pid="item.replyId" :tid="item.topicId" class="notice-span" @click="closeDrawer">
              {{ item.topicTitle.length > titleLimit ? (item.topicTitle.substring(0, titleLimit) + '..') : item.topicTitle }}
            </read-link>
            <!--根据类型不同的表述-->
            <span class="notice-span">
              <span v-if="item.type===ReplyNoticeType.topic">回复主题</span>
              <span v-if="item.type===ReplyNoticeType.reply">回复你的
                <el-link @click="showDialog('singleReply',item.repliedId)">[回复]</el-link>
              </span>
              <span v-if="item.type===ReplyNoticeType.at">@你</span>
              <span v-if="item.type===ReplyNoticeType.gift">向你赠送礼物</span>
            </span>
            <span class="notice-span">
              <el-button size="small" type="primary" @click="showDialog('singleReply',item.replyId)">快速查看</el-button>
            </span>
            <span class="notice-span">
              <el-button size="small" type="warning" @click="noHint(item.topicId,item.repliedId)">不再提醒</el-button>
            </span>
          </li>
        </ol>
      </el-tab-pane>
      <!--私信提示-->
      <el-tab-pane :disabled="msgNotices.length===0" :label="label('私信',msgNotices)" lazy name="msgNotices">
        <ol>
          <li v-for="item in msgNotices" :class="'notice-item'+(item.read?'':' unread-notice')" @click="read(item)">
            <timestamp :date="item.timestamp"/>
            <span class="notice-span"><span v-if="item.authorId===0">[系统消息]</span>
              <user-link v-else :user-id="item.authorId" :username="item.authorName">{{ item.authorName }}</user-link>
            </span><span v-if="item.type===MessageNoticeType.created" class="notice-span">发起了</span>
            <span v-if="item.type===MessageNoticeType.replied" class="notice-span">回复了</span>
            <!--会话详情链接-->
            <span class="notice-span">
              <message-link :message-id="item.messageId" @click="closeDrawer">[会话]</message-link>
            </span>
          </li>
        </ol>
      </el-tab-pane>
      <!--赞踩提示-->
      <el-tab-pane :disabled="recommendNotices.length===0" :label="label('赞踩',recommendNotices)" lazy name="recommendNotices">
        <ol>
          <li v-for="item in recommendNotices" :class="'notice-item'+(item.read?'':' unread-notice')" @click="read(item)">
            <timestamp :date="item.timestamp"/>
            <span class="notice-span">你于</span>
            <!--主题链接-->
            <span class="notice-span">
              <read-link :page="item.page" :pid="item.replyId" :tid="item.topicId" class="notice-span" @click="closeDrawer">
                {{ item.topicTitle.length > titleLimit ? (item.topicTitle.substring(0, titleLimit) + '..') : item.topicTitle }}
              </read-link>
            </span>
            <span class="notice-span">的</span>
            <span class="notice-span">
              <read-link :pid="item.replyId" class="notice-span" @click="closeDrawer">
                [回复]
              </read-link>
            </span>
            <span class="notice-span">赞踩数更新了</span>
            <span class="notice-span">
              <el-button size="small" type="primary" @click="showDialog('singleReply',item.replyId)">快速查看</el-button>
            </span>
            <span class="notice-span">
              <el-button size="small" type="warning" @click="noHint(item.topicId,item.replyId)">不再提醒</el-button>
            </span>
          </li>
        </ol>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button type="warning" @click="readAll">全部已读</el-button>
      <el-button type="danger" @click="noticeClear().then(()=>show=false)">清空消息</el-button>
    </template>
  </el-drawer>
</template>

<!--suppress CssUnusedSymbol -->
<style scoped>
.notice-item {
  text-align: left;
}

.unread-notice {
  font-weight: bold;
}

.notice-span {
  margin-left: 7px
}
</style>